<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台管理系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      <link rel="stylesheet" href="css/app.v2.css" type="text/css" />
      <link rel="stylesheet" type="text/css" href="css/fileinput.css">
</head>
<body>
<section class="vbox">
	<header class="bg-dark dk header navbar navbar-fixed-top-xs">
    <div class="navbar-header aside-md"> <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"> <i class="fa fa-bars"></i> </a> <a href="#" class="navbar-brand" data-toggle="fullscreen"><img src="images/logo.png" class="m-r-sm">Notebook</a> <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user"> <i class="fa fa-cog"></i> </a> </div>
    <ul class="nav navbar-nav hidden-xs">
      <li class="dropdown"> <a href="#" class="dropdown-toggle dker" data-toggle="dropdown"> <i class="fa fa-building-o"></i> <span class="font-bold">Activity</span> </a>
        <section class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
          <div class="wrapper lter m-t-n-xs"> <a href="#" class="thumb pull-left m-r"> <img src="images/avatar.jpg" class="img-circle"> </a>
            <div class="clear"> <a href="#"><span class="text-white font-bold">@Mike Mcalidek</a></span> <small class="block">Art Director</small> <a href="#" class="btn btn-xs btn-success m-t-xs">Upgrade</a> </div>
          </div>
          <div class="row m-l-none m-r-none m-b-n-xs text-center">
            <div class="col-xs-4">
              <div class="padder-v"> <span class="m-b-xs h4 block text-white">245</span> <small class="text-muted">Followers</small> </div>
            </div>
            <div class="col-xs-4 dk">
              <div class="padder-v"> <span class="m-b-xs h4 block text-white">55</span> <small class="text-muted">Likes</small> </div>
            </div>
            <div class="col-xs-4">
              <div class="padder-v"> <span class="m-b-xs h4 block text-white">2,035</span> <small class="text-muted">Photos</small> </div>
            </div>
          </div>
        </section>
      </li>
      <li>
        <div class="m-t m-l"> <a href="price.html" class="dropdown-toggle btn btn-xs btn-primary" title="Upgrade"><i class="fa fa-long-arrow-up"></i></a> </div>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right hidden-xs nav-user">
      <li class="dropdown hidden-xs"> <a href="#" class="dropdown-toggle dker" data-toggle="dropdown"><i class="fa fa-fw fa-search"></i></a>
        <section class="dropdown-menu aside-xl animated fadeInUp">
          <section class="panel bg-white">
            <form role="search">
              <div class="form-group wrapper m-b-none">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search">
                  <span class="input-group-btn">
                  <button type="submit" class="btn btn-info btn-icon"><i class="fa fa-search"></i></button>
                  </span> </div>
              </div>
            </form>
          </section>
        </section>
      </li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="thumb-sm avatar pull-left"> <img src="images/avatar.jpg"> </span> John.Smith <b class="caret"></b> </a>
        <ul class="dropdown-menu animated fadeInRight">
          <span class="arrow top"></span>
          <li> <a href="#" data-toggle="ajaxModal" >Logout</a> </li>
        </ul>
      </li>
    </ul>
  </header>
  <section>
    <section class="hbox stretch"> 
      <aside class="bg-dark lter aside-md hidden-print" id="nav">
        <section class="vbox">
          <section class="w-f scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="5px" data-color="#333333">
              <nav class="nav-primary hidden-xs">
                <ul class="nav">
                  <li class="active"><a href="index.html" class="active"><i class="fa fa-cog icon"><b class="bg-warning"></b></i><span class="pull-right"><i class="fa fa-angle-down text"></i><i class="fa fa-angle-up text-active"></i></span><span>基础设置</span></a>
                    <ul class="nav lt">
                      <li><a href="index.html"><i class="fa fa-angle-right"></i><span>一级分类</span></a></li>
                      <li><a href="basic_active.html"><i class="fa fa-angle-right"></i><span>二级分类</span></a></li>
                      <li><a href="basic_address.html"><i class="fa fa-angle-right"></i><span>地址管理</span></a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-user icon"><b class="bg-success"></b></i><span class="pull-right"><i class="fa fa-angle-down text"></i><i class="fa fa-angle-up text-active"></i></span><span>用户相关</span></a>
                    <ul class="nav lt">
                      <li><a href="user_information.html"><i class="fa fa-angle-right"></i><span>用户信息</span></a></li>
                    </ul>
                  </li>
                  <li><a href="#pages"><i class="fa fa-file-text icon"><b class="bg-primary"></b></i><span class="pull-right"><i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> </span><span>活动相关</span> </a>
                    <ul class="nav lt">
                      <li><a href="activities_index.html"><i class="fa fa-angle-right"></i><span>活动相关</span></a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-envelope-o icon"><b class="bg-primary dker"></b> </i><span class="pull-right"><i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> </span> <span>反馈描述</span></a> 
                    <ul class="nav lt">
                      <li><a href="feedback.html"><i class="fa fa-angle-right"></i><span>反馈相关</span></a></li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </div>              
          </section>
        </section>
      </aside>
      <section id="content">
        <section class="panel panel-default">
           <header class="panel-heading">用户信息</header>
           <div class="row text-sm wrapper">
              <div>
                <a href="#modal-add" data-toggle="modal" class="btn btn-s-md btn-danger btn-rounded" style="float: right;">添加</a>
              </div>
          </div>
          <div class="table-responsive">
            <table class="table table-striped b-t b-light text-sm">
              <thead>
                <tr>
                  <th>用户编号</th>
                  <th>openId</th>
                  <th>昵称</th>
                  <th>头像</th>
                  <th>绑定手机号</th>
                  <th>出生年月</th>
                  <th>地址</th>
                  <th>邮箱</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>01</td>
                  <td>123455</td>
                  <td>一路向北</td>
                  <td>/data/img/i.png</td>
                  <td>13178436476</td>
                  <td>2016-12-31</td>
                  <td>上海市松江区</td>
                  <td>13@qq.com</td>
                  <td><a href="#modal-modify" data-toggle="modal" class="btn btn-s-md btn-danger">修改</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <footer class="panel-footer">
                <div class="row">
                  <div class="col-sm-4 hidden-xs">
                    <select class="input-sm form-control input-s-sm inline">
                      <option value="0">Bulk action</option>
                      <option value="1">Delete selected</option>
                      <option value="2">Bulk edit</option>
                      <option value="3">Export</option>
                    </select>
                    <button class="btn btn-sm btn-default">Apply</button>
                  </div>
                  <div class="col-sm-4 text-center"> <small class="text-muted inline m-t-sm m-b-sm">showing 20-30 of 50 items</small> </div>
                  <div class="col-sm-4 text-right text-center-xs">
                    <ul class="pagination pagination-sm m-t-none m-b-none">
                      <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                      <li><a href="#">1</a></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                      <li><a href="#">4</a></li>
                      <li><a href="#">5</a></li>
                      <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
                    </ul>
                  </div>
                </div>
          </footer>
        </section>
      </section>
    </section>
  </section>
</section>
<script src="js/app.v2.js"></script>
<div class="modal fade" id="modal-modify">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">修改</h4>
      </div>
      <div class="modal-body">
        <section class="panel panel-default m-l-n-md m-r-n-md m-b-none">
          <div class="panel-body">
            <form role="form">
              <div class="form-group">
                <label>openId</label>
                <input type="text" class="form-control" placeholder="openId" value="123455">
              </div>
              <div class="form-group">
                <label>昵称</label>
                <input type="text" class="form-control" placeholder="昵称" value="一路向北">
              </div>
              <div class="form-group">
                  <label>头像</label>
              <form enctype="multipart/form-data">
                  <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
              </form>
            </div>
              <div class="form-group">
                <label>绑定手机号</label>
                <input type="text" class="form-control" placeholder="绑定手机号" value="13178436476">
              </div>
              <div class="form-group">
                <label>出生年月</label>
                <input class="input-sm input-s datepicker-input form-control" size="16" type="text" value="12-31-2016" data-date-format="dd-mm-yyyy">
              </div>
              <div class="form-group">
                <label>地址</label>
                <input type="text" class="form-control" placeholder="地址" value="上海市松江区">
              </div>
              <div class="form-group">
                <label>邮箱</label>
                <input type="text" class="form-control" placeholder="邮箱" value="13@qq.com">
              </div>
              <button type="submit" class="btn btn-s-md btn-success" style="display: block;margin: 20px auto 0px;">修改</button>
            </form>
          </div>
        </section>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-s-md btn-success" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal-add">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">添加</h4>
      </div>
      <div class="modal-body">
        <section class="panel panel-default m-l-n-md m-r-n-md m-b-none">
          <div class="panel-body">
            <form role="form">
              <div class="form-group">
                  <label>openId</label>
                  <input type="text" class="form-control" placeholder="openId">
              </div>
              <div class="form-group">
                  <label>昵称</label>
                  <input type="text" class="form-control" placeholder="昵称">
              </div>
              <div class="form-group">
                  <label>头像</label>
              <form enctype="multipart/form-data">
                  <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
              </form>
            </div>
              <div class="form-group">
                <label>绑定手机号</label>
                <input type="text" class="form-control" placeholder="绑定手机号" value="">
              </div>
              <div class="form-group">
                <label>出生年月</label>
                <input class="input-sm input-s datepicker-input form-control" size="16" type="text" value="" data-date-format="dd-mm-yyyy">
              </div>
              <div class="form-group">
                <label>地址</label>
                <input type="text" class="form-control" placeholder="地址" value="">
              </div>
              <div class="form-group">
                <label>邮箱</label>
                <input type="text" class="form-control" placeholder="邮箱" value="">
              </div>
              <button type="submit" class="btn btn-s-md btn-success" style="display:block;margin: 20px auto 0">添加</button>
            </form>
          </div>
        </section>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-success" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- datepicker -->
<script src="js/bootstrap-datepicker.js" cache="false"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="js/file-input/fileinput.min.js"></script>
<script>
  $("#file-0").fileinput({
      'allowedFileExtensions' : ['jpg', 'png','gif'],
  });
</script>
</body>
</html>